<template>
	<view class="main">
		<tou_hand1 handtitle='sim账号绑定用户列表'></tou_hand1>
		<view class="tap">
			<view class="tapone">
				<input placeholder="sim卡系统账号" v-model="simAccount" />
				<view class="taponetxt" @click="selbtn">查询</view>
			</view>
			<view class="taptwo" v-for="(item, index) in simdata" :key="index">
				<view class="taptwofirst">
					<view>id：{{item.id}}</view> 
					<view>sim卡系统账号：{{item.simAccount}}</view>
				</view>
				<view class="taptwosecond" @click="delbtn(item.id)">
					解绑
				</view>
			</view>
		</view>
		<view class="dibu" @click="addbtn">绑定sim卡系统账号</view>
	</view>
</template>

<script>
	import tou_hand1 from '../../components/tou_hand1/tou_hand1.vue'
	// import {
	// 	Dialog
	// } from 'vant';
	export default {
		components: {tou_hand1},
		mounted() {
			document.querySelector('body').setAttribute('style', 'background-color:#fff')
		},

		data() {
			return {
				simAccount:'',//sim卡系统账号
				simdata:[]
			}
		},
		onLoad(option) {
			
		},
		onShow() {
			this.show()
		},
		methods: {
			show(){
				let data={
					simAccount:this.simAccount
				}
				this.$base.request1('manager/simBindUser/list', 'GET',data)
					.then(res => {
						if(res.data.code==0){
							this.simdata=res.data.rows
						}else{
							this.$toast.fail(res.data.msg)
						}
					})
					.catch(err => {
				
				})
			},
			addbtn(){
				uni.navigateTo({
					url: '../simcard_add/simcard_add'
				})
			},
			delbtn(id){
				Dialog.confirm({
					title: '提示',
					message: '确认解绑？',
				}).then(() => {
					uni.showLoading({
						title: '请稍候',
						mask: true
					})
					this.$base.request1('manager/simBindUser/remove'+ '/' + id, 'DELETE')
						.then(res => {
							uni.hideLoading()
							if(res.data.code==200){
								this.$toast.success('解绑成功')
								this.show()
							}else{
								this.$toast.fail(res.data.msg)
							}
						})
						.catch(err => {
					
					})
				}).catch(() => {
					return
				});
				
			},
			selbtn(){
				this.show()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		overflow-x: hidden;
		padding-bottom: 60upx;
		.tap{
			padding: 0 32upx;
			box-sizing: border-box;
			.tapone{
				width: 100%;
				display: flex;
				align-items: center;
				margin-top: 20upx;
				
				input{
					width: 240upx;
					border: 2upx solid #333;
					padding: 10upx;
					border-radius: 10upx;
					margin-right: 20upx;
				}
				/deep/.uni-input-placeholder{
					font-size: 26upx;
					font-weight: 600;
				}
				/deep/.uni-input-input{
					font-size: 26upx;
					font-weight: 600;
				}
				.taponetxt{
					padding: 18upx 25upx;
					border-radius: 10upx;
					background-color: #4B98ED;
					font-size: 26upx;
					font-weight: 600;
					text-align: center;
					color: #FFFFFF;
					margin-left: 20upx;
				}
			}
			.taptwo{
				box-shadow: 0upx 4upx 9upx 0upx rgba(44,44,44,0.21);
				box-sizing: border-box;
				padding: 15upx 25upx;
				margin-top: 28upx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.taptwosecond{
					padding: 10upx;
					background-color: #4B98ED;
					color: #FFFFFF;
					font-size: 28upx;
					font-weight: 600;
					border-radius: 10upx;
				}
			}
		}
		.dibu{
			position: fixed;
			bottom: 0upx;
			left: 5%;
			width: 90%;
			background-color: #4B98ED;
			color: #FFFFFF;
			font-size: 30upx;
			padding: 20upx 0;
			text-align: center;
			font-weight: 600;
			border-radius: 10upx;
		}
	}
</style>
